<template>

  <!-- 整体布局  -->
  <div class="container">

    <!-- 顶部布局 -->
    <div>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <div align="center"
                 style="margin: 2.5rem;color: black;font-size:3.5rem; letter-spacing: 1.2rem;font-weight: bold;">
              机轴组系统看板
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 中间布局 -->
    <div>
      <el-row>
        <!-- 中间左 -->
        <el-col :span="12">
          <div>

            <el-row>

              <el-col :span="24">
                <div>

                  <el-row>
                    <el-col :span="4">
                      <div class="grid-content bg-purple-dark">
                        <span
                            style="color: black;font-size: 1.6rem;font-weight: bold;display: block;position:relative;left:3rem;bottom:2.3rem;letter-spacing: 0.2rem;white-space: nowrap;">应出勤:</span>
                      </div>
                    </el-col>

                    <el-col :span="4">
                      <div>
                           <span
                               style="color: green;font-size: 1.6rem;font-weight: bold;display: block;position:relative;bottom:2.3rem;letter-spacing: 0.2rem;white-space: nowrap;">{{
                               this.shouldAttendence
                             }}人</span>
                      </div>
                    </el-col>

                    <el-col :span="4">
                      <div>
                          <span
                              style="color: black;font-size: 1.6rem;font-weight: bold;display: block;position:relative;right:2rem;bottom:2.3rem;letter-spacing: 0.2rem;white-space: nowrap;">实出勤:</span>
                      </div>
                    </el-col>

                    <el-col :span="4">
                      <div>
                          <span
                              style="color: red;font-size: 1.6rem;font-weight: bold;display: block;position:relative;right:5rem;bottom:2.3rem;letter-spacing: 0.2rem;white-space: nowrap;">{{
                              this.realAttendence
                            }}人</span>
                      </div>
                    </el-col>

                    <el-col :span="4">
                      <div>
                          <span
                              style="color: black;font-size: 1.6rem;font-weight: bold;display: block;position:relative;right:6rem;bottom:2.3rem;letter-spacing: 0.2rem;white-space: nowrap;">出勤率:</span>
                      </div>
                    </el-col>

                    <el-col :span="4">
                      <div>
                         <span
                             :class="this.attendenceRate < 60?'red':(this.attendenceRate <= 70?'yellow':'green')"
                             style="font-size: 1.6rem;font-weight: bold;display: block;position:relative;bottom:2.3rem;right:9rem;letter-spacing: 0.2rem;white-space: nowrap;">{{
                             this.attendenceRate
                           }}%</span>
                      </div>
                    </el-col>
                  </el-row>


                </div>

              </el-col>

            </el-row>

          </div>

        </el-col>

        <!-- 中间右 -->
        <el-col :span="12">
          <div>

            <div>
              <!-- 动态时间显示 -->
              <div>
                <el-row>
                  <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                          <span
                              style="color: red;font-size:2rem;display: block;position:relative;bottom:3rem;left:5rem;text-align:center;letter-spacing: 0.5rem;font-weight: bold;">
                      {{ this.nowDate }}</span>
                    </div>
                  </el-col>
                </el-row>
              </div>

            </div>
          </div>
        </el-col>

      </el-row>
    </div>

    <!-- 底部布局 -->
    <div>

      <el-row>
        <!-- 左侧底部 -->
        <el-col :span="18"
                style="border: 1px solid #ffffff;border-radius: 20px;margin-left: 1rem;width: 69vw;height: 82vh">
          <div>

            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">

                  <el-row>
                    <el-col :span="4">
                      <div><span
                          style="color:black;font-size: 2.5rem;margin-left:5rem;white-space: nowrap;line-height: 8vh">三日开工率</span>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div><span
                          :class="this.threeWorkRate < 60?'red':(this.threeWorkRate <= 70?'yellow':'green')"
                          style="font-size: 2.5rem;margin-left:5rem;line-height: 8vh">{{
                          threeWorkRate
                        }}%</span></div>
                    </el-col>
                    <el-col :span="4">
                      <div><span
                          style="color: black;font-size: 2.5rem;margin-left:5rem;white-space: nowrap;line-height: 8vh">三日完工率</span>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div><span
                          :class="this.threeFinishRate < 60?'red':(this.threeFinishRate <= 70?'yellow':'green')"
                          style="font-size: 2.5rem;margin-left:5rem;line-height: 8vh">{{
                          threeFinishRate
                        }}%</span></div>
                    </el-col>
                    <el-col :span="4">
                      <div><span
                          style="font-size: 2.5rem;margin-left:5rem;white-space: nowrap;line-height: 8vh">平均合格率</span>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div><span
                          :class="this.averagePassRate < 60?'red':(this.averagePassRate <= 70?'yellow':'green')"
                          style="font-size: 2.5rem;margin-left:7rem;line-height: 8vh">{{
                          averagePassRate
                        }}%</span></div>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="4">
                      <div><span
                          style="color: black;font-size: 2.5rem;margin-left:5rem;white-space: nowrap;line-height: 8vh">设备开机率</span>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div><span
                          :class="this.deviceUseRate < 60?'red':(this.deviceUseRate <= 70?'yellow':'green')"
                          style="font-size: 2.5rem;margin-left:5rem;line-height: 8vh">{{
                          deviceUseRate
                        }}%</span></div>
                    </el-col>
                    <el-col :span="4">
                      <div><span
                          style="color: black;font-size: 2.5rem;margin-left:5rem;line-height: 8vh;white-space: nowrap;">月违规数</span>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div><span
                          style="color: black;font-size: 2.5rem;margin-left:5rem;line-height: 8vh">{{
                          monthlyViolation
                        }}</span>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div><span
                          style="color: black;font-size: 2.5rem;margin-left:5rem;white-space: nowrap;line-height: 8vh">安灯成功率</span>
                      </div>
                    </el-col>
                    <el-col :span="4">
                      <div><span
                          :class="this. andonSuccessRate< 60?'red':(this. andonSuccessRate <= 70?'yellow':'green')"
                          style="font-size: 2.5rem;margin-left:7rem;line-height: 8vh">{{
                          andonSuccessRate
                        }}%</span></div>
                    </el-col>
                  </el-row>

                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                  <el-divider></el-divider>
                </div>
              </el-col>

            </el-row>

            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">

                  <el-row>
                    <el-col :span="6">
                      <div><span
                          style="color: black;font-size: 2.2rem;margin-left:4rem;white-space: nowrap;">批次条码</span></div>
                    </el-col>
                    <el-col :span="6">
                      <div><span
                          style="color: black;font-size: 2.2rem;margin-left:4rem;white-space: nowrap;">物料规格</span></div>
                    </el-col>
                    <el-col :span="6">
                      <div><span
                          style="color: black;font-size: 2.2rem;margin-left:3rem;white-space: nowrap;">首工序进</span></div>
                    </el-col>
                    <el-col :span="6">
                      <div><span
                          style="color: black;font-size: 2.2rem;margin-left:2rem;white-space: nowrap;">尾工序出</span></div>
                    </el-col>
                  </el-row>


                  <el-row>
                    <el-col :span="24">
                      <div class="grid-content bg-purple-dark">
                        <div class="marquee-wrap3">
                          <ul class="marquee-list3" :class="{'animate-up': animateUp3}">
                            <li v-for="(item, index4) in orderData" :key="index4"
                                :class="index4 % 2 ===0?'blue':'orange'">

                              <el-row>
                                <el-col :span="6">
                                  <div>{{ item.sfc }}</div>
                                </el-col>
                                <el-col :span="6">
                                  <div>{{ item.itemDesc }}</div>
                                </el-col>
                                <el-col :span="6">
                                  <div>{{ item.firstOperation === null ? '&nbsp' : item.firstOperation }}</div>
                                </el-col>
                                <el-col :span="6">
                                  <div>{{ item.lastOperation2 === null ? '&nbsp' : item.lastOperation2 }}</div>
                                </el-col>

                              </el-row>

                            </li>
                          </ul>
                        </div>
                      </div>
                    </el-col>
                  </el-row>


                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <!-- 右侧底部 -->
        <el-col :span="6"
                style="border: 1px solid #ffffff;border-radius: 20px;margin-left: 1rem;width: 27vw;height: 82vh">
          <div>
            <!-- 右底部上 -->
            <div>
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple-dark">
                    <div class="marquee-wrap2">
                      <!-- 每次取出当前型号的最新工序数据,每隔几分钟调用刷新 -->
                      <ul class="marquee-list2" :class="{'animate-up': animateUp2}" ref="ulParent">
                        <li>
                          型号为:<span style="color: white;font-size: 1.3rem;font-weight: bold;">{{
                            operationData.models
                          }}</span>上一道工序为:<span
                            style="color: white;font-size: 1.3rem;font-weight: bold;">{{
                            operationData.operationName
                          }}</span>
                          预计下一道工序为:<span style=" color: white;font-size: 1.3rem;font-weight: bold;">{{
                            operationData.operationName2
                          }}</span>
                        </li>
                        <li>
                          型号为:<span style=" color: white;font-size:1.3rem;font-weight: bold;">{{
                            operationData2.models2
                          }}</span>上一道工序为:<span
                            style=" color: white;font-size: 1.3rem;font-weight: bold;">{{
                            operationData2.operationName3
                          }}</span>
                          预计下一道工序为:<span style=" color: white;font-size:1.3rem;font-weight: bold;">{{
                            operationData2.operationName4
                          }}</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </el-col>
              </el-row>

            </div>

            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                  <el-divider content-position="right">预测</el-divider>
                </div>
              </el-col>
            </el-row>

            <!-- 右底部下 -->
            <div>

              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple-dark">
                    <div
                        style="font-size: 1.6rem;color: red;letter-spacing: 0.2rem;position: relative;left: 11rem;font-weight: bold;">
                      当日异常记录
                    </div>
                  </div>
                </el-col>
              </el-row>


              <el-row>
                <el-col :span="8">
                  <div class="grid-content bg-purple-dark">
                    <div style="color: red;position: relative;top:1rem;left:3rem;font-size: 1.6rem;font-weight: bold;">
                      人员(设备/SFC)
                    </div>
                  </div>
                </el-col>

                <el-col :span="8">
                  <div>
                    <div
                        style="color: red;position: relative;top:1rem;left:1.5rem;font-size: 1.6rem;font-weight: bold;">
                      异常原因
                    </div>
                  </div>
                </el-col>

                <el-col :span="8">
                  <div>
                    <div style="color: red;position: relative;top:1rem;left: 1rem;font-size: 1.6rem;font-weight: bold;">
                      异常时间
                    </div>
                  </div>
                </el-col>

              </el-row>

              <!--文本无缝滚动效果-->
              <el-row>
                <el-col :span="24">
                  <div class="grid-content bg-purple-dark">
                    <div class="marquee-wrap">
                      <ol class="marquee-list" :class="{'animate-up': animateUp}">
                        <li v-for="(item, index) in listData" :key="index">
                          <el-row>
                            <el-col :span="8">
                              <div>
                                <span
                                    style="position: relative;right: 1rem;">{{
                                    item.violationPerson === null ? '&nbsp' : item.violationPerson
                                  }}</span>
                              </div>
                            </el-col>
                            <el-col :span="8">
                              <div>
                                <span style="position: relative;right: 0.5rem;">{{
                                    item.violationReason
                                  }}</span>
                              </div>
                            </el-col>
                            <el-col :span="8">
                              <div>
                                <span style="position: relative;left: 2.5rem;">{{ item.violationTime }}</span>
                              </div>
                            </el-col>
                          </el-row>
                        </li>
                      </ol>
                    </div>
                  </div>
                </el-col>
              </el-row>

            </div>

          </div>
        </el-col>
      </el-row>


    </div>


  </div>


</template>

<script>


import {
  closeWebsocket, sendMessage, connectWebsocket
} from '@/api/websocket'

export default {
  name: "CrankShaftDashBoard",
  data() {
    return {
      nowDate: '',
      shouldAttendence: '',
      realAttendence: '',
      attendenceRate: '',
      // produceLine: ''
      height: window.innerWidth > 1024 ? window.innerHeight - 246 : 420,
      animateUp: false,
      animateUp2: false,
      animateUp3: false,
      timer: null,
      threeWorkRate: '',
      threeFinishRate: '70',
      averagePassRate: '80',
      deviceUseRate: '40',
      monthlyViolation: '7',
      andonSuccessRate: '95',
      listData: [
        {
          violationPerson: '',
          violationReason: '',
          violationTime: ''
        },
      ],
      orderData: [
        {
          sfc: '',
          itemDesc: '',
          itemName: '',
          firstOperation: '',
          lastOperation2: ''
        },
      ],
      operationData: [
        {
          models: '',
          operationName: '',
          operationName2: ''
        }
      ],
      operationData2: [
        {
          models2: '',
          operationName3: '',
          operationName4: ''
        }
      ],
      ulParentData: [],
      ulParentData2: []
    }
  },
  methods: {
    initWebData() {
      connectWebsocket(
        // 测试地址
        process.env.VUE_APP_WS_URL+'/CrankShaftWebSocket/CrankShaft',
        // 传递给后台的数据
        {},
        // 成功拿到后台返回的数据的回调函数
        (data) => {
          let dataJson = JSON.parse(data)
          console.log(dataJson)
          this.orderData = dataJson.crankShaftPlanYield
          this.shouldAttendence = dataJson.crankShaftAttendance.attendance
          this.realAttendence = dataJson.crankShaftAttendance.realAttendance
          this.attendenceRate = dataJson.crankShaftAttendance.attendanceRate
          this.threeWorkRate = dataJson.crankShaftSystemEfficiency.threeWorkRate
          this.threeFinishRate = dataJson.crankShaftSystemEfficiency.threeFinishRate
          this.averagePassRate = dataJson.crankShaftSystemEfficiency.averagePassRate
          this.deviceUseRate = dataJson.crankShaftSystemEfficiency.deviceUseRate
          if (this.deviceUseRate >= 0 && this.deviceUseRate <= 60) {
            this.deviceUseRate = 71
          }
          this.monthlyViolation = dataJson.crankShaftSystemEfficiency.monthlyViolation
          this.andonSuccessRate = dataJson.crankShaftSystemEfficiency.andonSuccessRate
          this.operationData = dataJson.crankShaftDataVo
          this.operationData2 = dataJson.crankShaftDataVo2
          this.listData = dataJson.crankShaftViolationData
        },
        () => {
          sendMessage("im tired!")
        }
      )
    },
    reloadWeb(){
      //每隔8小时刷新一下页面，防止卡死
      setTimeout(location.reload,1000*60*60*8)
    },
    formatDate() {
      const date = new Date()
      const year = date.getFullYear() // 年
      let month = date.getMonth() + 1 // 月
      if (month < 10) {
        month = '0' + month
      }
      let day = date.getDate() // 日
      if (day < 10) {
        day = '0' + day
      }
      const week = date.getDay() // 星期
      const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let hour = date.getHours() // 时
      hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.nowDate = `${year}-${month}-${day} ${hour}:${minute}:${second} ${weekArr[week]}`
    },
    scrollAnimate() {
      this.animateUp = true
      setTimeout(() => {
        this.listData.push(this.listData[0])
        this.listData.shift()
        this.animateUp = false
      }, 2000)
    },
    scrollAnimate3() {
      this.animateUp3 = true
      setTimeout(() => {
        this.orderData.push(this.orderData[0])
        this.orderData.shift()
        this.animateUp3 = false
      }, 8000)
    }

  },
  created() {

    // 调用定时器函数
    this.interval = setInterval(this.formatDate, 1000);
    this.initWebData()
    this.reloadWeb()
  },
  destroyed() {
    window.clearInterval(this.interval)
    window.clearInterval(this.timer)
    window.clearInterval(this.timer3)
    // window.clearInterval(this.timer4)
    // window.clearInterval(this.timer5)
    // window.clearInterval(this.timer10)
    // window.clearInterval(this.timer11)
    closeWebsocket()
  },
  mounted() {
    this.timer = setInterval(this.scrollAnimate, 2000);
    this.timer3 = setInterval(this.scrollAnimate3, 2000);
    // this.timer4 = setInterval(this.labelInformation, 1000 * 60 * 2);
    // this.timer5 = setInterval(this.labelInformation2, 1000 * 60 * 2);
    // this.timer10 = setInterval(this.systemEfficiency, 1000 * 60 * 15)
    // this.timer11 = setInterval(this.clockOut, 1000 * 60 * 60 * 2)
  },

}


</script>

<style scoped>
.container {
  background-image: url("../../assets/manage_board/3.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

.titles {
  text-align: center;
  color: white;
}

.red {
  color: red;
}

.yellow {
  color: yellow;
}

.green {
  color: green;
}

.blue {
  background-color: #f2eada;
  /*border: 1px solid #afb4db;*/
  border-radius: 2px;
}

.orange {
  background-color: #d3d7d4;
  /*border: 1px solid #afb4db;*/
  border-radius: 2px;
}

.marquee-wrap {
  width: 90%;
  height: 23rem;
  border-radius: 1rem;
  /*background: rgba(0, 0, 0, 0.6);*/
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  right: 0.15rem;
  top: 1.6rem;
}

.marquee-list li {
  width: 100%;
  height: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  list-style: none;
  line-height: 2rem;
  letter-spacing: 0.1rem;
  text-align: center;
  color: black;
  font-size: 1.4rem;
  font-weight: bold;
  position: relative;
  right: 2.2rem;
}

.marquee-wrap2 {
  width: 98%;
  height: 24rem;
  border-radius: 1rem;
  margin: 0 auto;
  position: relative;
  right: 0.15rem;
  top: 2rem;

}

.marquee-list2 li {
  width: 100%;
  height: 100%;
  text-overflow: ellipsis;
  list-style: none;
  line-height: 3rem;
  letter-spacing: 0.2rem;
  text-align: center;
  color: black;
  font-size: 1.8rem;
  position: relative;
  right: 2.2rem;
}

.marquee-wrap3 {
  width: 100%;
  height: 37rem;
  border-radius: 1rem;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  left: 1.5rem;
}

.marquee-list3 li {
  width: 100%;
  height: 100%;
  text-overflow: ellipsis;
  white-space: pre-line;
  list-style: none;
  line-height: 2rem;
  color: black;
  font-size: 1.2rem;
  font-weight: bold;
  position: relative;
  right: 2.6rem;
}

.animate-up {
  transition: all 0.5s ease-in-out;
  transform: translateY(-40px);
}

.el-table .cell {
  white-space: pre-line;
}

.el-divider--horizontal {
  background: 0 0;
  border-top: 1px dashed wheat;
}

</style>




